"use client";

import React from "react";
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
import rehypeRaw from "rehype-raw";
import rehypeSanitize from "rehype-sanitize";

interface MessageProps {
  message: {
    role: "user" | "assistant";
    content: string;
  };
}

export function Message({ message }: MessageProps) {
  const { role, content } = message;

  return (
    <div className={`flex ${role === "user" ? "justify-end" : "justify-start"} mb-4`}>
      <div 
        className={`
          max-w-[80%] rounded-lg p-4
          ${role === "user" 
            ? "bg-blue-100 dark:bg-blue-900 text-slate-800 dark:text-slate-100" 
            : "bg-gray-100 dark:bg-slate-800 text-slate-800 dark:text-slate-100"
          }
        `}
      >
        {role === "assistant" ? (
          <div className="prose prose-sm dark:prose-invert max-w-none">
            <ReactMarkdown
              remarkPlugins={[remarkGfm]}
              rehypePlugins={[rehypeRaw, rehypeSanitize]}
            >
              {content}
            </ReactMarkdown>
            </div>
          ) : (
          <p className="text-slate-800 dark:text-slate-100">{content}</p>
          )}
      </div>
    </div>
  );
} 